<!DOCTYPE html>
<html>
	<head>
		<!-- 为机器提供信息的 -->
		<meta charset="utf-8">
		<title>饿了么</title>
		<style type="text/css">
			div {
				background-color: pink;
				width: 100px;
				height: 100px;
			}

			.div1 {
				position: relative;
				/* 不脱流，不让出自己的位置 */
				top: 50px;
				left: 50px;

			}

			.div2 {
				position: relative;
				/* 以父节点的左上角为坐标原点
				 脱流
				 */
				top: 10px;
				left: 500px;
			}

			.foot {
				background-color: pink;
				position: fixed;
				bottom: 0px;
			}
			.header{
				position: fixed;
				width: 100%;
				height: 40px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		
		
		
		<div class="header">
			商家列表
		</div>
		<div class="foot">
			1111112222
		</div>


		<!-- 一切标签都是盒子
		 每一个盒子都占用了一个巨型二维空间
		 如何准确控制一个盒子的二维空间区域
		 div 最常用的盒子标签
		  按需占用空间
			默认宽 100%
		 -->
		<div class="div1">
			1

		</div>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>
		<p>我爱北极天安门</p>

		<div class="div2">
			2
		</div>
		<div>
			3
		</div>


	</body>
</html>
